<template>
  <el-dropdown
    class="dropdown-button"
    :trigger="trigger"
  >
    <div class="dropdown-button__label">
      <span><slot></slot></span>
      <el-icon>
        <arrow-down />
      </el-icon>
    </div>
    <template #dropdown>
      <slot name="dropdown"></slot>
    </template>
  </el-dropdown>
</template>

<script>

export default {
  name: 'DropdownButton',
  props: {
    // 同el-dropdown trigger
    trigger: {
      default: 'click'
    }
  }
}
</script>

<style scoped lang="scss">
.dropdown-button {
  .dropdown-button__label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    &:hover {
      color: var(--el-color-primary-light-5);
    }
    .el-icon {
      position: relative;
      top: -2px;
    }
  }
}
</style>
